import React, { useEffect, useState } from 'react';
import { getAccumulatedData } from '@/services/api/home';
interface Item {
  title: string;
  number: number;
  unit: string;
}
function getNumber(num: number) {
  return Number.isInteger(num) ? num : num.toFixed(2) || 0;
}
const style: React.CSSProperties = {
  background: '#fff',
  borderRadius: '14px',
};
const number: React.CSSProperties = {
  fontSize: '28px',
  fontWeight: 'bold',
  color: '#1D1D1F',
  textAlign: 'left',
  lineHeight: '36px',
};
// const unit: React.CSSProperties = {
//   fontSize: '14px',
//   fontWeight: 'bold',
//   color: '#1D1D1F',
// };
const title: React.CSSProperties = {
  fontSize: '14px',
  color: '#646464',
  textAlign: 'left',
  lineHeight: '16px',
};
const content: React.CSSProperties = {
  margin: 0,
  padding: 0,
  maxWidth: '384px',
  minHeight: '160px',
};
const itemstyle: React.CSSProperties = {
  width: '50%',
  float: 'left',
  boxSizing: 'border-box',
  padding: '16px 40px 0',
};
const App: React.FC = () => {
  const [TotalData, setTotalData] = useState<any>([]);
  const getTableHeader = async () => {
    const res = await getAccumulatedData();
    let {
      result: { totalTime, totalMileage, totalArea, totalOil },
    } = res;
    setTotalData([
      {
        title: '总工作时长(h）',
        number: getNumber(totalTime),
        unit: ' 万',
      },
      {
        title: '总里程(公里）',
        number: getNumber(totalMileage / 1000),
        unit: ' 万',
      },
      {
        title: '总面积(亩）',
        number: getNumber(totalArea),
        unit: ' 万',
      },
      {
        title: '总油耗(L）',
        number: getNumber(totalOil),
        unit: '',
      },
    ]);
  };
  useEffect(() => {
    getTableHeader();
  }, []);
  return (
    <div style={style}>
      <ul style={content}>
        {TotalData.map((item: Item, index: number) => (
          <li style={itemstyle} key={index}>
            <div style={number}>
              {item.number}
              {/* <span style={unit}>{item.unit}</span> */}
            </div>
            <div style={title}>{item.title}</div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;
